﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>检索坐标</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

         * {
             margin: 0px;
             padding: 0px;
         }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;

        }

        li {
            margin-left: 30px;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=place&key=XQSBZ-MYPKU-EJSVT-4XWSN-QWJXH-2TBDM"></script>
    <script>
        var ap;
        var marker;
        var params;
        var geocoder;
        var map;
        var localinfo = {
            latlng: { lat: 48.6589239484962, lng: 87.04087972640991 },
            location: '新疆维吾尔自治区',
            locationdetail: '新疆维吾尔自治区阿勒泰地区布尔津县'
        };

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        }
        function G(id) {
            return document.getElementById(id);
        }
        function setlocalInfo(point) {

//            //地址解析
//            if (geocoder) {
//                geocoder.getAddress(point);
//            }
            if(marker)
            {
                clearOverlay(marker);
            }
            //map.setCenter(point);
            marker= new qq.maps.Marker({
                map: map,
                position: point
            });

            G("p_lng").innerHTML = point.lng;
            G("p_lat").innerHTML = point.lat;


            //同时设置父窗口信息
            if(window.parent&&window.parent.document.getElementById("txtLngYPoint")){
                window.parent.document.getElementById("txtLngYPoint").value = point.lng;
                window.parent.document.getElementById("txtLatXPoint").value = point.lat;
            }


        }

        function initDom() {
            var lat = getQueryString('lat');
            if (lat) {
                var lng = getQueryString('lng');
                params = {
                    lat: lat,
                    lng: lng
                };

            }

            G('regionText').value = localinfo.locationdetail;

            init(params);

        }

         

        function init(params) {
            var center;
            if (params) {
                center = new qq.maps.LatLng(params.lat, params.lng);
            } else {
                center = new qq.maps.LatLng(localinfo.latlng.lat, localinfo.latlng.lng);

            }
             map = new qq.maps.Map(document.getElementById("container"), {
                center: center,
                zoom: 13
            });

            //地址和经纬度之间进行转换服务
            geocoder = new qq.maps.Geocoder({
                //设置服务请求成功的回调函数
                complete: function (result) {
                    setlocalInfo(result.detail.location);
                    qq.maps.event.addListener(marker, 'click', function () {
                        info.open();
                        info.setContent('<div style="width:280px;height:100px;">' +
                            result.detail.address + '</div>');
                        info.setPosition(result.detail.location);
                    });
                },
                //若服务请求失败，则运行以下函数
                error: function () {
                    alert("出错了，请输入正确的经纬度！！！");
                }
            });

            if (params) {
                 marker = new qq.maps.Marker({
                    map: map,
                    position: center
                });
            }

            setautocompletelocal();
//            ap.setOptions({
//                location:region.value
//            });
            var searchService = new qq.maps.SearchService({
                map: map,
                pageCapacity:1,
                complete:function(res){
                    if(res&&res.detail&&res.detail.pois)
                    {
                        if(res.detail.pois.length>0)
                        {
                            var firstpoi=res.detail.pois[0];
                            setlocalInfo(firstpoi.latLng);
                        }
                    }
                }
            });
            var regionText = document.getElementById("regionText").value;

            searchService.setLocation(regionText);
            qq.maps.event.addListener(ap, "confirm", function (res) {
              
                searchService.search(res.value);
            });
            qq.maps.event.addListener(map, 'click', function (e) {
                setlocalInfo(e.latLng);
            });
        }

        //清除地图上的marker
        function clearOverlay(overlay){
  
                overlay.setMap(null);

        }

        function setautocompletelocal(){
            var region=G("regionText");

            //实例化自动完成
            ap = new qq.maps.place.Autocomplete(document.getElementById('place'),{

                location: localinfo.location
            });
        }

    </script>
</head>
<body onload="initDom()">
<div style="width: 100%; height: 70%" id="container"></div>
<div><p>提示：输入具体地点或点击地图中相应位置，即可获取该地点的经纬度坐标。</p></div>
    <p style="margin: 5px;    padding-left: 24px;">   区域： <input type='text' style="width: 210px; padding: 3px 4px;" disabled value='' id="regionText" /></p>
<p style="margin: 5px">
   输入地点： <input style="width: 210px; padding: 3px 4px;" type="text" id="place"/>
</p>
<div id="txtpoint" style="display: none">
    <p>纬度：<span id="p_lat"></span></p>
    <p>经度：<span id="p_lng"></span></p>
</div>
</body>
</html>
